<div class="projects-container" fxLayout="row wrap">

  <div class="project mat-elevation-z4 divide" fxFlex="calc(33.3333% - 12px)" *ngFor="let project of projects">

    <div class="header" style="background: linear-gradient(to left, rgb(203, 173, 109), rgb(213, 51, 105));">
      <div class="content">
        <div fxFlex="auto" fxLayout="column">
          <div class="top-row" fxLayout="row" fxLayoutAlign="space-between center">
            <div class="">{{project.date | date:"yyyy年MM月dd日"}}</div>
            <button mat-icon-button>
              <mat-icon>more_horiz</mat-icon>
            </button>

          </div>
          <div class="codename" fxFlex="auto" fxLayout="row" fxLayoutAlign="center center">
            {{project.name}}
          </div>
        </div>
      </div>
    </div>

    <div class="details">
      <div class="content">
        <div class="name">产品改进</div>
        <div class="members" fxLayout="row">
          <div class="member ">
          </div>
        </div>
        <div class="divider"></div>
        <div class="status success ongoing">进行中</div>
      </div>
    </div>

    <div class="overlay">
      <div class="overlay-content" fxLayout="column" fxLayoutAlign="space-between">
        <div class="overlay-actions" fxLayout="row" fxLayoutgap="16px">
          <button mat-icon-button>
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-icon-button>
            <mat-icon>backup</mat-icon>
          </button>
          <button mat-icon-button>
            <mat-icon>delete</mat-icon>
          </button>

        </div>

        <button mat-raised-button>
          <span class="mat-button-wrapper">查看详情</span>
        </button>

      </div>
    </div>
  </div>

</div>